import { useState, memo} from 'react'
import {  useMemo } from 'react'
interface PropsItem{
    list:string[]
}
export default function App() {
    const [count, setCount] = useState(123)
    const [msg] = useState('nknknknNVIVbObbuoulblBBi')
    const list = useMemo(()=>[msg.toLowerCase(),msg.toUpperCase()],[msg])
    // const list = [msg.toLowerCase(),msg.toUpperCase()]
    const handleClick = () => {
        setCount(count + 1)
    }
    return (
        <>
            <h1>MemoComponents</h1>
            <button onClick={handleClick}>button</button>
            {count}
            <Children list={list}></Children>
        </>
    )
}

const Children = memo(
    function Children({list}:PropsItem) {
    return (
        <>
            <h1>Children</h1>
            {Math.random()}
            <br />
            {list}
        </>
    )
})